<template>
  <el-select
    v-model="model"
    :disabled="disabled"
    :placeholder="placeholder"
    :loading="loading"
    v-bind="$attrs"
  >
    <el-option
      v-for="item of userList"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>
</template>

<script setup lang="ts">
import { onMounted, watch } from 'vue'
import {
  getNextApproveUser,
  IAllApproveUser,
  TNextApproveUserRes,
  ESelectApproveUserType,
} from '@/api/sys/userManage'
import useFetch from '@/hooks/useFetch'

const model = defineModel<number>()

const props = defineProps<
  IAllApproveUser & {
    disabled?: boolean
    placeholder?: string
  }
>()

const {
  loading,
  execute,
  res: userList,
} = useFetch<TNextApproveUserRes>(getNextApproveUser, {}, false)

onMounted(() => {
  if (props.type) {
    execute({
      type: props.type,
      applyId: props.applyId,
      feedbackId: props.feedbackId,
    })
  }
})

watch(
  () => [props.applyId, props.type, props.feedbackId],
  (newVal) => {
    const [newApplyId, newType, newFeedbackId] = newVal || []
    if (newType === ESelectApproveUserType.DEAL && !newFeedbackId) {
      return
    }
    execute({
      type: newType,
      applyId: newApplyId,
      feedbackId: newFeedbackId,
    })
  },
  {
    deep: true,
  },
)
</script>

<style scoped lang="scss"></style>
